<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>webgl</title>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    body,html{
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
    }
    #canvas{
      width: 400px;
      height: 400px;
      background-color: pink;
    }
    #myCanvas2 {
      background-color: pink;
    }
    canvas{
      outline: 1px solid #ff0000;
    }
  </style>
</head>
<body>
  <!-- 01.canvas基础知识-获取canvas元素 -->
  <!-- <canvas id="canvas"></canvas>
  <canvas id="myCanvas"></canvas>
  <canvas id="myCanvas2" width="600" height="600"></canvas>
  <script type="module" src="/src/pages/01.canvas基础知识-获取canvas元素.js"></script> -->
  <!-- <script type="module" src="/src/pages/02.canvas基础知识-动态创建canvas元素.js"></script> -->
  <!-- <script type="module" src="/src/pages/03.类型化数组-创建.js"></script> -->
  <!-- <script type="module" src="/src/pages/04.类型化数组-访问.js"></script> -->
  <!-- <script type="module" src="/src/pages/05.类型化数组-转换.js"></script> -->
  <!-- <script type="module" src="/src/pages/06.类型化数组-webgl三角形案例.js"></script> -->
  <!-- 
  着色器
  数据类型：​
    基本数据类型：float, int, bool​
    向量类型：vec2, vec3, vec4（浮点型）；ivec2, ivec3, ivec4（整数型）；bvec2, bvec3, bvec4（布尔型）​
    矩阵类型：mat2, mat3, mat4​
    采样器类型：sampler2D, samplerCube（用于纹理采样）

  变量修饰符：​
    用于指定变量的作用域、生命周期和用途。不同的修饰符在顶点着色器和片段着色器中起到不同的作用。  ​
    attribute：用于顶点着色器，定义从顶点缓冲区传入的变量（仅在顶点着色器中使用）。​
    uniform：定义在整个渲染过程中保持不变的变量，常用于传递变换矩阵、光照参数等。​
    varying：用于在顶点着色器和片段着色器之间传递插值数据。 
  内置变量：​
    顶点着色器内置变量：​
      gl_Position顶点的变换后位置​，四维向量
      gl_PointSize大小​
    片段着色器内置变量：​
      gl_FragColor：片段的最终颜色。
  void main()
    主函数
  -->
  <!-- 顶点着色器 -->
  <!-- <script id="vertex" type="x-shader/x-vertex">
    attribute vec2 aPosition;
    varying aColor;

    void main() {
      gl_Position = vec4(aPosition, 0, 1);
      aColor = vec4(0.5, 0.5, 0.5, 1.0);
      gl_PointSize = 10.0;
    }
  </script> -->
  <!-- 片元着色器 -->
  <!-- <script id="fragment" type="x-shader/x-fragment">
    varying aColor;
    gl_FragColor;
  </script> -->

  <!-- <script type="module" src="/src/pages/07.webgl-api的使用-画点.js"></script> -->
  <!-- <script type="module" src="/src/pages/08.webgl-api的使用-动态传递点.js"></script> -->
  <!-- <script type="module" src="/src/pages/09.webgl-api的使用-arraybuffer画线.js"></script> -->
  <!-- <script type="module" src="/src/pages/10.webgl-api的使用-arraybuffer画彩色线.js"></script> -->
  <!-- <script type="module" src="/src/pages/11.webgl-api的使用-arraybuffer画彩色线-buffer合并.js"></script> -->
  <!-- <script type="module" src="/src/pages/12.webgl-api的使用-arraybuffer画三角形.js"></script> -->
  <!-- <script type="module" src="/src/pages/13.webgl-api的使用-drawArrays介绍.js"></script> -->
  <!-- <script type="module" src="/src/pages/14.图形变换-平移及缩放.js"></script> -->
  <!-- <script type="module" src="/src/pages/15.图形变换-旋转.js"></script> -->
  <!-- <script type="module" src="/src/pages/16.图形变换-绘制立方体.js"></script> -->
  <!-- <script type="module" src="/src/pages/17.图形变换-绘制立方体-顶点索引.js"></script> -->
  <!-- <script type="module" src="/src/pages/18.webgl动画.js"></script> -->
  <script type="module" src="/src/pages/19.glmatrix矩阵库的使用-平移-缩放-旋转.js"></script>
</body>
</html>